<template>
  <div class="page_root" data-page-name="模板项目看板" data-page-identification="e_mhdv4iy8nv">
    <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
      <!-- begin vid_cc874syqn2 自定义模板_0tdzkmsbqd -->
      <a-modal title="项目阶段详情" v-model:visible="state.detailVisible" width="1200px" :footer="null" centered>
        <div class="product-content">
          <a-row class="row-size">
            <a-col :span="6" class="row-size">
              <a-form-item label="项目名称">
                <a-tooltip>
                  <template #title>{{ state.milepostMsg.projectName }}</template>
                  <div class="detail-item too-long">{{ state.milepostMsg.projectName }}</div>
                </a-tooltip>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="项目阶段名称">
                <div class="detail-item">{{ state.milepostMsg.milepostName }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="项目阶段状态">
                <div class="detail-item">{{ state.milepostMsg.milepostStatus }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="项目经理">
                <div class="detail-item">{{ state.milepostMsg.pmName }}</div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="row-size">
            <a-col :span="6" class="row-size">
              <a-form-item label="计划开始时间">
                <div class="detail-item">{{ state.milepostMsg.startTime }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="计划结束时间">
                <div class="detail-item">{{ state.milepostMsg.endTime }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="实际开始时间">
                <div class="detail-item">{{ state.milepostMsg.actualStartTime }}</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="实际结束时间">
                <div class="detail-item">{{ state.milepostMsg.actualFinishTime }}</div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="row-size">
            <a-col :span="6" class="row-size">
              <a-form-item label="计划工时">
                <div class="detail-item">200</div>
              </a-form-item>
            </a-col>
            <a-col :span="6" class="row-size">
              <a-form-item label="实际工时">
                <div class="detail-item">160</div>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
        <a-tabs v-model:activeKey="state.detailActiveKey" type="card">
          <a-tab-pane key="1" tab="进行中任务">
            <div class="default-table">
              <a-table :columns="doingTaskColumns" :data-source="state.doingTask" bordered>
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'taskName'">
                    <div class="task-name">
                      <div
                        v-if="record.mark === '里程碑'"
                        :class="{
                                                    'task-milestone': record.mark === '里程碑',
                                                    'task-milestone-right':
                                                        record.mark === '里程碑' && record.critialPath
                                                }"
                      >里程碑</div
                      >
                      <div
                        v-else-if="record.mark === '初验'"
                        :class="{
                                                    'task-first': record.mark === '初验',
                                                    'task-first-right': record.mark === '初验' && record.critialPath
                                                }"
                      ></div>
                      <div
                        v-else-if="record.mark === '终验'"
                        class="task-over"
                        :class="{
                                                    'task-over': record.mark === '终验',
                                                    'task-over-right': record.mark === '终验' && record.critialPath
                                                }"
                      ></div>
                      <div v-if="record.critialPath" class="critical-path">关键路径</div>
                      <div
                        :class="{
                                                    'is-first-no': record.mark === null && !record.critialPath,
                                                    'is-first': record.mark !== null,
                                                    'is-first-path': record.mark !== null && record.critialPath,
                                                    'is-first-path-no-mark': record.mark === null && record.critialPath
                                                }"
                      >
                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                          <template #title>
                            <p style="color: #262626; margin: 0">{{ record.taskIndex }} {{ text }}</p>
                          </template>
                          <span class="task-name-title">{{ record.taskIndex }} {{ text }}</span>
                        </a-tooltip>
                      </div>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                    <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                    <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                    <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                    <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                    <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                    <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="进行中行动项任务">
            <div class="default-table">
              <a-table :columns="doingActionTaskColumns" :data-source="state.doingActionTask" bordered>
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                    <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                    <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                    <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                    <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                    <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                    <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="未关闭任务风险">
            <div class="default-table">
              <a-table :columns="riskColumns" :data-source="state.riskTask">
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'taskName'">
                    <div class="task-name">
                      <div
                        v-if="record.mark === '里程碑'"
                        :class="{
                                                    'task-milestone': record.mark === '里程碑',
                                                    'task-milestone-right':
                                                        record.mark === '里程碑' && record.critialPath
                                                }"
                      >里程碑</div
                      >
                      <div
                        v-else-if="record.mark === '初验'"
                        :class="{
                                                    'task-first': record.mark === '初验',
                                                    'task-first-right': record.mark === '初验' && record.critialPath
                                                }"
                      ></div>
                      <div
                        v-else-if="record.mark === '终验'"
                        class="task-over"
                        :class="{
                                                    'task-over': record.mark === '终验',
                                                    'task-over-right': record.mark === '终验' && record.critialPath
                                                }"
                      ></div>
                      <div v-if="record.critialPath" class="critical-path">关键路径</div>
                      <div
                        :class="{
                                                    'is-first-no': record.mark === null && !record.critialPath,
                                                    'is-first': record.mark !== null,
                                                    'is-first-path': record.mark !== null && record.critialPath,
                                                    'is-first-path-no-mark': record.mark === null && record.critialPath
                                                }"
                      >
                        <a-tooltip placement="top" :overlayStyle="standardStyle" color="#fff">
                          <template #title>
                            <p style="color: #262626; margin: 0">{{ record.taskIndex }} {{ text }}</p>
                          </template>
                          <span class="task-name-title">{{ record.taskIndex }} {{ text }}</span>
                        </a-tooltip>
                      </div>
                    </div>
                  </template>
                  <template v-if="column.dataIndex === 'taskStatus'">
                    <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                    <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                    <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                    <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                    <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                    <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                    <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                    <div v-else>{{ text }}</div>
                  </template>
                </template>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="未关闭行动项任务风险">
            <div class="default-table">
              <a-table :columns="riskActionColumns" :data-source="state.riskActionTask" bordered />
            </div>
          </a-tab-pane>
        </a-tabs>
      </a-modal>
      <a-modal title="与项目关联的行动项任务" v-model:visible="state.actionTaskVisible" width="1200px" :footer="null" centered>
        <div class="default-table">
          <a-table :columns="doingActionTaskColumns" :data-source="state.actionProjectData" bordered>
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === 'taskStatus'">
                <div class="wqd-btn" v-if="text === '未启动'">未启动</div>
                <div class="jxz-btn" v-else-if="text === '进行中'">进行中</div>
                <div class="wc-btn" v-else-if="text === '完成'">完成</div>
                <div class="yq-btn" v-else-if="text === '延期'">延期</div>
                <div class="yqwc-btn" v-else-if="text === '延期完成'">延期完成</div>
                <div class="spz-btn" v-else-if="text === '审批中'">审批中</div>
                <div class="wqd-btn" v-else-if="text === '下线'">下线</div>
                <div v-else>{{ text }}</div>
              </template>
            </template>
          </a-table>
        </div>
      </a-modal>
      <div class="body">
        <div class="top">
          <a-row class="row-size" :gutter="24">
            <a-col :span="5" class="row-size">
              <a-form-item label="项目名称">
                <a-select
                  v-model:value="state.projectName"
                  show-search
                  style="width: 100%"
                  placeholder="请选择"
                  allow-clear
                  @focus="getProject"
                  :filterOption="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                  :fieldNames="{
                                        label: 'projectName',
                                        value: 'projectId'
                                    }"
                  :options="state.projectlist"
                />
              </a-form-item>
            </a-col>
            <a-col class="row-size" :span="5">
              <a-form-item label="项目状态">
                <a-select
                  v-model:value="state.projectStatus"
                  :options="[
                                        { label: '进行中', value: '进行中' },
                                        { label: '完成', value: '完成' }
                                    ]"
                />
              </a-form-item>
            </a-col>
            <a-col class="row-size" :span="6">
              <a-space size="middle">
                <a-button type="primary" @click="getTableData()">查询</a-button>
                <a-button type="ghost" @click="resetTableData">重置</a-button>
              </a-space>
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <div class="table-tip">
            <div class="tip-title">模版项目进度看板 </div>
            <div class="tip1"><span class="tip-msg">准备工作</span><div class="box1"></div></div>
            <div class="tip2"><span class="tip-msg">启动工作</span><div class="box2"></div></div>
            <div class="tip3"><span class="tip-msg">数据预处理</span><div class="box3"></div></div>
            <div class="tip4"><span class="tip-msg">产品确认</span><div class="box4"></div></div>
            <div class="tip5"><span class="tip-msg">数据建模</span><div class="box5"></div></div>
            <div class="tip6"><span class="tip-msg">试运行</span><div class="box6"></div></div>
            <div class="tip7"><span class="tip-msg">正试运行</span><div class="box7"></div></div>
            <div class="tip8"><span class="tip-msg">变更时间</span><div class="box8"></div></div>
          </div>
          <!--                 图表部分-->
          <div class="table_detail_wrapper">
            <div class="product-wrapper flex">
              <div class="product-list">
                <div class="table-title">项目概览</div>
                <div class="product-info" id="mainLeft">
                  <div class="project-item" v-for="(projectItem, projectIndex) in state.list">
                    <div class="center">
                      <div class="pj-item flex1">
                        <div class="project-status" v-if="projectItem.projectStatus === '进行中'">{{ projectItem.projectStatus }}</div>
                        <div class="xmwc-btn" v-if="projectItem.projectStatus === '完成'">{{
                            projectItem.projectStatus
                          }}</div>
                        <div class="xmwqd-btn" v-if="projectItem.projectStatus === '未启动'">{{
                            projectItem.projectStatus
                          }}</div>
                        <div class="xmyq-btn" v-if="projectItem.projectStatus === '延期'">{{
                            projectItem.projectStatus
                          }}</div>
                        <div class="project-name">{{ projectItem.projectName }}</div></div
                      >
                      <div class="pj-item flex1">项目开始时间:{{ projectItem.startTime }}</div>

                      <div class="pj-item flex1">计划终验时间:{{ projectItem.endTime }}</div>
                      <div class="flex1 pj-item"
                      ><span style="width: 50%">项目完成进度:</span><a-progress :percent="projectItem.finishProgress" stroke-linecap="square" strokeColor="#2769FF" status="active"
                      /></div>
                      <div class="flex1 pj-item"
                      ><span style="width: 50%">项目成本进度:</span><a-progress :percent="projectItem.costProgress" stroke-linecap="square" strokeColor="#AB28FF" status="active"
                      /></div>
                      <a class="underline" href="javaSscript:;" @click="getActionList(projectItem.projectId)">与项目关联的行动项任务({{ projectItem.actionTaskCount }})</a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 这是日期 -->
              <div class="date-warpper flex-1">
                <!-- 日期头部 -->
                <div class="date-header flex">
                  <div :style="state.currentDayStyle" class="current-day"> 今天 <div class="borderTip"></div></div>
                  <div v-for="(days, month) in state.monthsWithDays" :key="month">
                    <div class="month"> {{ state.currentYear }}年{{ month }}月 </div>
                    <div class="flex">
                      <div v-for="day in days" :key="day" class="day-item">
                        {{ day }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="main" id="productInfoRight">
                  <!-- 这里是进度 -->
                  <div class="content-wrapper" v-for="(projectItem, projectIndex) in state.list" :key="projectIndex">
                    <!-- 准备中 -->
                    <div class="ready-wrapper" :style="calculateStyle(projectItem, projectIndex, 0)">
                      <div class="ready" :style="calculateWidth(projectItem, 0)" @click="getDetail(projectItem, 0)"> <div class="change" :style="dailyProgressData(projectItem, 0)"></div></div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        0,
                                                        projectItem.children[0].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[0].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        0,
                                                        projectItem.children[0].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[0].costProgress
                            ? projectItem.children[0].costProgress
                            : 0

                        }}%
                      </div>
                    </div>

                    <!-- 开始 -->
                    <div class="start-wrapper" :style="calculateStyle(projectItem, projectIndex, 1)">
                      <div class="start" :style="calculateWidth(projectItem, 1)" @click="getDetail(projectItem, 1)">
                        <div class="change" :style="dailyProgressData(projectItem, 1)"></div>
                      </div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        1,
                                                        projectItem.children[1].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[1].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        1,
                                                        projectItem.children[1].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[1].costProgress
                            ? projectItem.children[1].costProgress
                            : 0

                        }}%
                      </div>
                    </div>
                    <!-- 数据预处理 -->
                    <div class="preprocessing-wrapper" :style="calculateStyle(projectItem, projectIndex, 2)">
                      <div class="preprocessing" :style="calculateWidth(projectItem, 2)" @click="getDetail(projectItem, 2)">
                        <div class="change" :style="dailyProgressData(projectItem, 2)"></div>
                      </div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        2,
                                                        projectItem.children[2].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[2].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        2,
                                                        projectItem.children[2].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[2].costProgress
                            ? projectItem.children[2].costProgress
                            : 0

                        }}%
                      </div>
                    </div>
                    <!-- 产品确认 -->
                    <div class="confirm-wrapper" :style="calculateStyle(projectItem, projectIndex, 3)" @click="getDetail(projectItem, 3)">
                      <div class="confirm" :style="calculateWidth(projectItem, 3)">
                        <div class="change" :style="dailyProgressData(projectItem, 3)"></div>
                      </div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        3,
                                                        projectItem.children[3].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[3].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        3,
                                                        projectItem.children[3].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[3].costProgress
                            ? projectItem.children[3].costProgress
                            : 0

                        }}%
                      </div>
                    </div>
                    <!-- 数据建模 -->
                    <div class="modeling-wrapper" :style="calculateStyle(projectItem, projectIndex, 4)" @click="getDetail(projectItem, 4)">
                      <div class="modeling" :style="calculateWidth(projectItem, 4)">
                        <div class="change" :style="dailyProgressData(projectItem, 4)"></div>
                      </div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        4,
                                                        projectItem.children[4].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[4].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        4,
                                                        projectItem.children[4].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[4].costProgress
                            ? projectItem.children[4].costProgress
                            : 0

                        }}%
                      </div>
                    </div>
                    <!-- 试运行 -->
                    <div class="test-run-wrapper" :style="calculateStyle(projectItem, projectIndex, 5)" @click="getDetail(projectItem, 5)">
                      <div class="test-run" :style="calculateWidth(projectItem, 5)">
                        <div class="change" :style="dailyProgressData(projectItem, 5)"></div>
                      </div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        5,
                                                        projectItem.children[5].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[5].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        5,
                                                        projectItem.children[5].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[5].costProgress
                            ? projectItem.children[5].costProgress
                            : 0

                        }}%
                      </div>
                    </div>
                    <!--                  正试运行-->
                    <div class="run-wrapper" :style="calculateStyle(projectItem, projectIndex, 6)" @click="getDetail(projectItem, 6)">
                      <div class="run" :style="calculateWidth(projectItem, 6)">
                        <div class="change" :style="dailyProgressData(projectItem, 6)"></div>
                      </div>
                      <div
                        class="finish"
                        :style="
                                                    calculateProgress(
                                                        projectItem,
                                                        6,
                                                        projectItem.children[6].finishProgress
                                                    )
                                                "
                      >
                        {{ projectItem.children[6].finishProgress }}%
                      </div>
                      <div
                        class="cost"
                        :style="
                                                    costProgressData(
                                                        projectItem,
                                                        6,
                                                        projectItem.children[6].costProgress
                                                    )
                                                "
                      >
                        {{
                          projectItem.children[6].costProgress
                            ? projectItem.children[6].costProgress
                            : 0

                        }}%
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--                 图表部分-->
        </div>
      </div>
      <!-- end vid_cc874syqn2 自定义模板_0tdzkmsbqd -->
    </a-spin>
  </div>
</template>
<script setup lang="tsx">
import {
  h, ref, reactive, toRaw, markRaw, watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
} from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission } from '@/utils/index';
import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
import dayjs from 'dayjs';
import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
/*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 *** PUBLISH_EXEGESIS ***/



  // 获取传入的流程ID
const props = defineProps({
    processInstanceId: {
      type: String
    }
  })
const immediateWatch = (source, callback) => {
  watch(source, callback, {deep: true,immediate: true })
}



/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = [];
const pageLoading = reactive({
  loading: false,
  tip: undefined
});
const authInfo = localGet('app-user-store');




// 处理校验
const setSubFormName =(parentInfo, name)=>{
  return [parentInfo.parents, parentInfo.cycleIndex, name];
}


/* ========================== 属性定义 ========================== */


/* -------------------------- 元素数据引用 -------------------------- */


/* ========================== 元素数据引用 ========================== */


/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */


/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */


/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */


/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
  'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
})

/* ========================== 页面参数 ========================== */


/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================


/* ========================== 组件事件处理方法 ========================== */


/* -------------------------- 生命周期 -------------------------- */
onMounted(() => { ;

});

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ?  clearInterval(timer): clearTimeout(timer);
  });
});

/* ========================== 生命周期 ========================== */


/* -------------------------- 数据关联处理 -------------------------- */





/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */


/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */


// ================================定制化逻辑========================================
onMounted(() => {
  state.dateList = getDays()
  const day = dayjs().diff(dayjs(state.dateList[0].date), 'day')
  state.currentDayStyle = {
    left: `${30 * day}px`
  }
  nextTick(() => {
    const middle = document.querySelector('.date-warpper').clientWidth / 2
    document.querySelector('.date-warpper').scrollLeft = 30 * day - middle
    const mainLeft = document.querySelector('.main')
    const productInfoRight = document.querySelector('.product-info')
    mainLeft.addEventListener('scroll', syncScroll)
    productInfoRight.addEventListener('scroll', syncScroll)
  })
  initializeMonthsWithDays()
})
function resetWidth() {
  const day = dayjs().diff(dayjs(state.dateList[0].date), 'day')
  const middle = document.querySelector('.date-warpper').clientWidth / 2
  document.querySelector('.date-warpper').scrollLeft = 30 * day - middle
}
const initializeMonthsWithDays = () => {
  for (let month = 1; month <= 12; month++) {
    state.monthsWithDays[month] = getDaysInMonth(month, state.currentYear)
  }
}
const standardStyle = {
  maxWidth: 'unset'
}
function getDays() {
  const currentYear = new Date().getFullYear() // 获取当前年份
  return Array.from({ length: 6 }, (v, i) => {
    const date = new Date(currentYear, i + 1, 0) // 设置日期为下月的第0天，即当前月的最后一天
    return {
      date: `${currentYear}-${(i + 1).toString().padStart(2, '0')}`, // 格式化月份为 "yyyy-mm"
      days: date.getDate() // 获取当月的天数
    }
  })
}

const getDaysInMonth = (month, year) => {
  return Array.from({ length: new Date(year, month, 0).getDate() }, (_, i) => i + 1)
}
const state = reactive({
  projectName: undefined,
  projectStatus: '',
  projectNameList: [],
  detailVisible: false,
  detailActiveKey: '1',
  doingTask: [],
  doingActionTask: [],
  riskTask: [],
  riskActionTask: [],
  actionTaskVisible: false,
  actionProjectData: [],
  chartData: [],
  currentYear: new Date().getFullYear(),
  monthsWithDays: {},
  list: [],
  dateList: [],
  currentDayStyle: {},
  milepostMsg: {},
  projectlist: []
})
const doingTaskColumns = [
  {
    title: '任务名称',
    dataIndex: 'taskName',
    ellipsis: true,
    resizable: true,
    width: '200px',
    fixed: 'left',
    align: 'left'
  },
  {
    title: '任务状态',
    dataIndex: 'taskStatus',
    resizable: true,
    ellipsis: false,
    width: '140px',
    align: 'center'
  },
  {
    title: '任务负责人',
    dataIndex: 'taskOwner',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '审核员',
    dataIndex: 'assessorName',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },

  {
    title: '任务执行人',
    resizable: true,
    dataIndex: 'taskParticipantStr',
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '计划开始',
    dataIndex: 'startTime',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '实际开始',
    dataIndex: 'actualStarTime',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '计划完成',
    dataIndex: 'endTime',
    ellipsis: true,
    width: '120px',
    resizable: true,
    align: 'center'
  }
]
const riskColumns = [
  {
    title: '任务名称',
    dataIndex: 'taskName',
    ellipsis: true,
    resizable: true,
    width: '220px',
    fixed: 'left',
    align: 'left'
  },
  {
    title: '风险描述',
    dataIndex: 'riskDescription',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '解决方案',
    dataIndex: 'solution',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  { title: '提交人', dataIndex: 'createdBy', align: 'center' },
  { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
]
const riskActionColumns = [
  {
    title: '行动项任务名称',
    dataIndex: 'projectNames',
    ellipsis: true,
    resizable: true,
    width: '220px',
    fixed: 'left',
    align: 'left'
  },
  {
    title: '风险描述',
    dataIndex: 'riskDescription',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  {
    title: '解决方案',
    dataIndex: 'solution',
    resizable: true,
    ellipsis: true,
    width: '140px',
    align: 'center'
  },
  { title: '提交人', dataIndex: 'createdBy', align: 'center' },
  { title: '提交时间', dataIndex: 'createdTime', align: 'center' }
]
const doingActionTaskColumns = [
  {
    title: '行动项任务名称',
    dataIndex: 'projectNames',
    ellipsis: true,
    width: '180px',
    fixed: 'left',
    align: 'left'
  },
  {
    title: '任务状态',
    dataIndex: 'taskStatus',
    resizable: true,
    ellipsis: false,
    width: '120px',
    align: 'center'
  },
  {
    title: '任务负责人',
    dataIndex: 'taskOwner',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '审核员',
    dataIndex: 'assessorName',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: 'PMO',
    dataIndex: 'projectManagementOffice',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '任务执行人',
    resizable: true,
    dataIndex: 'taskParticipantStr',
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '计划开始',
    dataIndex: 'startTime',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '实际开始',
    dataIndex: 'examPassTime',
    resizable: true,
    ellipsis: true,
    width: '120px',
    align: 'center'
  },
  {
    title: '计划完成',
    dataIndex: 'endTime',
    ellipsis: true,
    width: '120px',
    resizable: true,
    align: 'center'
  }
]
function getTableData() {
  post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/search', {
    projectId: state.projectName,
    status: state.projectStatus
  }).then(data => {
    state.list = data.data
  })
}
getTableData()
function resetTableData() {
  ;(state.projectName = undefined), (state.projectStatus = '')
  getTableData()
}
function getFirstDayOfYear() {
  const currentYear = dayjs().year()
  return `${currentYear}-01-01`
}
function calculateStyle(projectItem, projectIndex, phaseIndex) {
  const startDate = getFirstDayOfYear()
  const phaseStartDate = dayjs(projectItem.children[phaseIndex].startTime)
  const daysDifference = phaseStartDate.diff(startDate, 'day')
  const left = daysDifference * 30
  return {
    position: 'absolute',
    left: `${left}px`,
    top: phaseIndex > 0 ? `${phaseIndex * 44}px` : '12px'
  }
}
function calculateWidth(projectItem, phaseIndex) {
  const startDate = dayjs(projectItem.children[phaseIndex].startTime)
  const endDate = dayjs(projectItem.children[phaseIndex].endTime)
  const daysDifference = endDate.diff(startDate, 'day')
  const width = Number(daysDifference + 1) * 30
  return {
    width: `${width}px`
  }
}
function calculateProgress(projectItem, phaseIndex, progressNum) {
  const startDate = dayjs(projectItem.children[phaseIndex].startTime)
  const endDate = dayjs(projectItem.children[phaseIndex].endTime)
  const daysDifference = endDate.diff(startDate, 'day')
  const progress = (progressNum / 100) * Number(daysDifference + 1) * 30
  return {
    width: `${progress}px`
  }
}
function costProgressData(projectItem, phaseIndex, costProgress) {
  if (!costProgress) {
    costProgress = 0
  }
  const startDate = dayjs(projectItem.children[phaseIndex].startTime)
  const endDate = dayjs(projectItem.children[phaseIndex].endTime)
  const daysDifference = endDate.diff(startDate, 'day')
  const progress = (costProgress / 100) * Number(daysDifference + 1) * 30
  return {
    width: `${progress}px`
  }
}
function dailyProgressData(projectItem, phaseIndex) {
  const startDate = dayjs(projectItem.children[phaseIndex].endTime)
  const endDate = dayjs(projectItem.children[phaseIndex].alterStartTime)
  if (endDate) {
    const s1 = dayjs(projectItem.children[phaseIndex].startTime)
    const e1 = dayjs(projectItem.children[phaseIndex].endTime)
    const dfSt = e1.diff(s1, 'day')
    let dfStW = dfSt * 30
    const daysDifference = endDate.diff(startDate, 'day')
    const progress = Number(daysDifference + 1) * 30
    return {
      width: `${progress - 30}px`,
      left: `${dfStW + 30}px`
    }
  }
}
function getActionList(id) {
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${id}`, {}).then(data => {
    if (data.code === 200) {
      state.actionProjectData = data.data.dataList
      state.actionTaskVisible = true
    } else {
      message.error(data.message)
    }
  })
}
function getDetail(item, index) {
  const milepostId = item.children[index].milepostId
  const projectId = item.projectId
  console.log(item)
  post('/solution-ppm/api/v2/built-in-system-ppm/project/stage/search', {
    milepostName: item.children[index].milepostName,
    projectId: projectId
  }).then(data => {
    state.milepostMsg = data.data[0]
    state.milepostMsg.pmName = item.pmName
    state.milepostMsg.projectName = item.projectName
    console.log(state.milepostMsg)
    state.detailVisible = true
  })
  // 进行中任务
  post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/task/search', {
    milepostId: milepostId,
    projectId: projectId
  }).then(data => {
    state.doingTask = data.data
  })
  //   进行中行动项任务
  post(`/solution-ppm/api/v2/built-in-system-ppm/action_task/list/${projectId}`, {
    milepostId: milepostId,
    isRunning: '是'
  }).then(data => {
    state.doingActionTask = data.data.dataList
  })
  // 未关闭任务风险
  post('/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/task/queryRisk', {
    projectId: milepostId,
    milepostId: milepostId
  }).then(data => {
    state.riskTask = data.data
  })
  // 行动项风险
  post(
    `/solution-ppm/api/v2/built-in-system-ppm/project/dashboard/action_task/warn_list/${projectId}/${milepostId}`,
    {}
  ).then(data => {
    state.riskActionTask = data.data
  })
}

// Function to sync scroll
function syncScroll(event) {
  const percentageScrolled = event.target.scrollTop / (event.target.scrollHeight - event.target.clientHeight)

  productInfoRight.scrollTop =
    percentageScrolled * (productInfoRight.scrollHeight - productInfoRight.clientHeight)
  mainLeft.scrollTop = percentageScrolled * (mainLeft.scrollHeight - mainLeft.clientHeight)
}

// Add scroll event listeners to both divs
function getProject() {
  get('project/dashboard/factory_project/search').then(data => {
    state.projectlist = data.data
  })
}
</script>
<style lang="less" scoped>
.page_root {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container)
{
  height: 100%;
}
.page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
{
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.page_root :deep(.@{ant-prefix}-table)
{
  flex: auto;
  overflow: auto;
}
.table-moreBtn_down {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
  background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
  z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 15px !important;
  width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 30px !important;
  width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 45px !important;
  width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
  left: 60px !important;
  width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list)
{
  height: 100%;
  width: 50%;
}


.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.row-size {
  height: 32px;
  margin-bottom: 12px;
}
.top {
  background-color: #fff;
  height: 64px;
  border-radius: 2px;
  padding: 19px 24px;
  margin-bottom: 16px;
}
.content {
  background-color: #fff;
  padding: 24px;
}
.table-tip {
  display: flex;
  height: 53px;
}
.tip-title {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
  line-height: 53px;
}
.tip1,
.tip2,
.tip3,
.tip4,
.tip5,
.tip6,
.tip7,
.tip8 {
  height: 20px;
  margin: 16px 0 16px 24px;
  display: flex;
}
.box1,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8 {
  background: #ffe58f;
  width: 32px;
  height: 8px;
  margin-top: 7px;
  margin-left: 4px;
}
.box2 {
  background: #fff567;
}
.box3 {
  background: #d4f261;
}
.box4 {
  background: #87e9de;
}
.box5 {
  background: #90cbff;
}
.box6 {
  background: #d3adf7;
}
.box7 {
  background: #ffadd3;
}
.box8 {
  background: #ff2a00;
}
.tip-msg {
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
}
.detail-item {
  font-size: 14px;
  color: #000000;
  line-height: 22px;
  font-weight: 500;
}
.default-table {
  margin-top: 12px;
  margin-bottom: 12px;
}

.default-table :deep(.@{ant-prefix}-table-thead) > tr > th {
  background: #3875ff;
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 16px;
}

.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-thead
> tr:not(:last-child)
> th {
  border-bottom: 1px solid #d9d9d9;
}

.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-thead
> tr
> th {
  border-right: 1px solid #d9d9d9;
}

/* 将表格自带的左边框取消，方便设置表头边框颜色和内容边框颜色 */
.default-table :deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered) .@{ant-prefix}-table-container {
  border-left: none;
}

.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-thead
> tr
> th[colstart='0']:first-child {
  border-left: 1px solid #d9d9d9;
}

/* 开启粘性表头后，表格结构会发生变化 需另外处理 */
.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-header
table {
  border-top: 1px solid #d9d9d9;
}

.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
> .@{ant-prefix}-table-content
> table {
  border-top: 1px solid #d9d9d9;
}

.default-table
:deep(.@{ant-prefix}-table-thead)
> tr
> th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(
              .@{ant-prefix}-table-row-expand-icon-cell
          ):not([colspan])::before {
  background: #d9d9d9;
  width: 1px;
}

/*表格*/
.default-table :deep(.@{ant-prefix}-table-tbody) tr > td {
  font-size: 14px;
  font-family: arial, helvetica, 'microsoft yahei';
  font-weight: 400;
  color: #595959;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px 16px;
  word-break: break-all;

  .cell-wrapper {
    padding: 0 16px;
  }
}

.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-tbody
tr
> td {
  border-right: 1px solid #d9d9d9;
}

.default-table
:deep(.@{ant-prefix}-table.@{ant-prefix}-table-bordered)
.@{ant-prefix}-table-container
.@{ant-prefix}-table-tbody
tr
> td:first-child {
  border-left: 1px solid #d9d9d9;
}
.wqd-btn,
.yq-btn,
.wc-btn,
.yqwc-btn,
.jxz-btn,
.spz-btn {
  background: #ffffff;
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  letter-spacing: 0;
  text-align: center;
  line-height: 40px;
  font-weight: 400;
  width: 66px;
  height: 22px;
  line-height: 22px;
  margin: 0 auto;
}
.wc-btn {
  border: 1px solid rgba(48, 191, 120, 1);
  color: #30bf78;
}

.yq-btn {
  border: 1px solid rgba(224, 32, 32, 1);
  color: #e02020;
}

.wqd-btn {
  border: 1px solid rgba(140, 140, 140, 1);
  color: #8c8c8c;
}

.jxz-btn {
  border: 1px solid rgba(56, 117, 255, 1);
  color: #3875ff;
}

.yqwc-btn {
  border: 1px solid rgba(255, 152, 70, 1);
  color: #ff9846;
}

.spz-btn {
  border: 1px solid #00b4ec;
  color: #00b4ec;
}
.flex {
  display: flex;
  position: relative;
}
.flex-1 {
  flex: 1;
  overflow: auto;
}

.day-item {
  width: 30px;
  height: 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #eaeaea;
  line-height: 30px;
  text-align: center;
}
.content-wrapper {
  width: 10950px;
  padding: 4px;
  position: relative;
  height: 320px;
  border-bottom: 1px solid #bfbfbf;
}

.finish,
.cost {
  line-height: 12px;
  color: #fff;
  font-size: 10px;
  padding-left: 5px;
}
.finish {
  height: 12px;
  background-color: #2769ff;
}
.cost {
  height: 12px;
  background-color: #ab28ff;
}
.ready {
  height: 12px;
  background-color: #ffe58f;
  position: relative;
}
.start {
  height: 12px;
  background-color: #fdf58c;
  position: relative;
}
.preprocessing {
  height: 12px;
  background-color: #d4f261;
  position: relative;
}
.confirm {
  height: 12px;
  background-color: #87e9de;
  position: relative;
}
.modeling {
  height: 12px;
  background-color: #90cbff;
  position: relative;
}
.test-run {
  height: 12px;
  background-color: #ffadd3;
  position: relative;
}
.run {
  height: 12px;
  background-color: #d3adf7;
  position: relative;
}
.month {
  text-align: center;
  background: rgba(56, 117, 255, 0.2);
  height: 30px;
  line-height: 30px;
  border-right: #bfbfbf 1px solid;
}
.table-title {
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 500;
  text-align: center;
  height: 60px;
  line-height: 60px;
  background: rgba(56, 117, 255, 0.2);
}
.product-list {
  box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.3); /* Right shadow */
  border-left: 1px solid #d9d9d9;
}
.current-day {
  background-color: #4874f6;
  color: #fff;
  position: absolute;
  width: 36px;
  height: 21px;
  line-height: 21px;
  textalign: center;
  background: #3875ff;
  letterspacing: 0;
  borderradius: 2px;
  fontsize: 14px;
  text-align: center;
}
.today {
  border-right: 1px solid #4874f6;
}
.project-item {
  height: 320px;
  padding: 16px;
  background-color: #fff;
  border-bottom: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
}

.project-name {
  display: inlie-block;
  min-width: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 12px;
}
.mgb {
  margin: 10px 0;
}
.underline {
}
.flex1 {
  display: flex;
  justify-content: start;
}
.pj-item {
  margin: 10px 0;
}
.center {
  width: 100%;
}
.change {
  background-color: #ff2a00;
  height: 12px;
  position: absolute;
  right: 0;
}
.too-long {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 210px;
  margin-top: 5px;
}
.main {
  height: 550px;
  width: 10980px;
  overflow-y: auto;
  overflow-x: hidden;
}
.product-info {
  width: 300px;
  height: 550px;
  overflow-y: auto;
  overflow-x: hidden;
}
.product-info::-webkit-scrollbar {
  width: 0; /* 隐藏垂直滚动条 */
}
.borderTip {
  border-right: 1px dashed #4874f6;
  height: 580px;
  position: relative;
  z-index: 999;
}
.task-name-title {
  display: inlie-block;
  min-width: 50px;
}
.task-milestone {
  position: absolute;
  top: 13px;
  left: 9px;
  width: 45px;
  height: 14px;
  font-size: 12px;
  line-height: 14px; /* 与高度相同 */
  color: #3875ff;
  background: #ebf1ff;
  text-align: center;
}
.task-milestone-right {
  left: 70px;
}
.task-first {
  position: absolute;
  top: 13px;
  left: 16px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
  background-size: cover;
}
.task-first-right {
  position: absolute;
  top: 13px;
  left: 70px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482758234415104.png');
  background-size: cover;
}
.task-over {
  position: absolute;
  top: 13px;
  left: 16px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
  background-size: cover;
}
.task-over-right {
  position: absolute;
  top: 13px;
  left: 70px;
  width: 32px;
  height: 14px;
  background-image: url('http://10.40.0.33:9001/file-storage/422482777140240384.png');
  background-size: cover;
}
/*关键路径*/
.critical-path {
  position: absolute;
  top: 13px;
  left: 5px;
  font-size: 12px;
  width: 60px;
  height: 14px;
  line-height: 14px; /* 与高度相同 */
  color: #ff9846;
  background: #fff5ed;
  text-align: center;
}
.is-first {
  margin-left: 55px;
}

.is-first-no {
  margin-left: 16px;
}
.is-first-path {
  margin-left: 115px;
}
.is-first-path-no-mark {
  margin-left: 70px;
}
.task-name-title {
  display: inlie-block;
  min-width: 50px;
}
.xmyq-btn,
.xmwc-btn {
  background: rgba(24, 194, 255, 0.1);
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  letter-spacing: 0;
  text-align: center;
  font-weight: 700;
  width: 60px;
  height: 24px;
  line-height: 24px;
  margin: 0 auto;
  display: inline-block;
}

.xmwqd-btn,
.xmjxz-btn {
  border-radius: 2px;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  letter-spacing: 0;
  text-align: center;
  font-weight: 700;
  width: 60px;
  height: 24px;
  line-height: 24px;
  margin: 0 auto;
  display: inline-block;
}

.xmjxz-btn {
  border: 1px solid rgba(24, 194, 255, 1);
  color: #18c2ff !important;
  background: rgba(24, 194, 255, 0.1);
}

.xmwc-btn {
  border: 1px solid rgba(82, 196, 26, 1);
  color: #52c41a !important;
  background: #edf9e8;
}

.xmyq-btn {
  border: 1px solid rgba(245, 34, 45, 0.5);
  color: #f5222d !important;
  background: rgba(245, 34, 45, 0.1);
}

.xmwqd-btn {
  border: 1px solid rgba(140, 140, 140, 1);
  color: #8c8c8c !important;
}
.project-status {
  background: rgba(82, 196, 26, 0.2);
  border-radius: 2px;
  width: 60px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  color: #52c41a;
  letter-spacing: 0;
  font-weight: 700;
}
:deep(.ant3-progress-inner) {
  border-radius: 0;
}
</style>
